<ul id="tree" class="ztree"></ul>
<input type="hidden" id="zTreeCurrId" value="0" />

<form id="albumForm" class="modal hide fade in form-horizontal">
	<div class="modal-header">
		<button data-dismiss="modal" class="close" type="button">×</button>
		<h3 id="edit_foldername">新建相册</h3>
	</div>
	<div class="modal-body">
		<fieldset>
			<div class="control-group"> 
				<label for="edit_name" class="control-label">相册名称:</label>
				<div class="controls">
					<input class="input-xlarge focused" id="edit_name" name="form[name]" type="text" />
				</div>
			</div>
			
			<div class="control-group">
				<label for="edit_name_en" class="control-label">相册名称(en):</label>
				<div class="controls">
					<input class="input-xlarge focused" id="edit_name_en" name="form[name_en]" type="text" />
				</div>
			</div>
			
			<div class="control-group">
				<label for="edit_foldername" class="control-label">相册存储文件夹名称(不推荐中文):</label>
				<div class="controls">
					<input class="input-xlarge focused" id="edit_foldername" name="form[foldername]" type="text" />
				</div>
			</div>
			
			<div class="control-group">
				<label for="edit_sketch" class="control-label">概述:</label>
				<div class="controls">
					<textarea id="edit_sketch" name="form[sketch]"></textarea>
				</div>
			</div>
		</fieldset>
	</div>
	<div class="modal-footer">
		<input type="hidden" id="albumId" name="form[id]" />
		<input type="hidden" id="parentId" name="form[parent_id]" />
		<a data-dismiss="modal" class="btn cancel" href="#">取消</a>
		<a class="btn btn-primary save" href="#">保存</a>
	</div>
</form>

<script>
$(function() {

	var setting = {
        data: {
			simpleData: {
			    enable : true,
			    idKey : "id",
			    pIdKey : "parent_id",
			    rootPId : null
			},
            key: {
                children : "children",
                name : "name"
            }
        },
        view: {
        	dblClickExpand : true
		},
        edit : {
            enable : true,
            removeTitle : "remove",
            renameTitle : "rename",
            showRemoveBtn : true,
            showRenameBtn : true

        },
        callback: {
	        onDblClick: function(event, treeId, treeNode){
//	        	$.fn.zTree.getZTreeObj("tree").expandNode(treeNode, true, true, true);
	            if($('#zTreeCurrId').val() != treeNode.id){
					$('#zTreeCurrId').val(treeNode.id);
					$('#currAlbumTxt').text(treeNode.name);
	
					var albumId = treeNode.id;
					if(albumId != ''){
						$('#album-photos').scrollTop(0);
						$('#photo-container').html('');
						$('#empty-photo-text').fadeOut();
						$('#loading-block-photo').fadeIn();
						$.ajax({
							type: 'GET',
							url: '<?php echo url('picmaterials/getpics'); ?>',
							data: {albumId: albumId},
							success: function(data){
								if(!data){
									$('#loading-block-photo').fadeOut(function(){
										$('#empty-photo-text').fadeIn();
									});
								}else{
									$.each(data, function(k, v){
										var newImg = new Image();
										$(newImg).hide();
										$(newImg).load(function(){
											var a = $('<a class="thumbnail noMargin son-noMargin marginR1-2 marginB1-2" />');
											a.append(
												'<i class="icon-remove pointerCursor posAbs top-1 right-1"></i><input class="renameInput" type="text" value="'+v.name+'" />'
											).append($(this));

											$(this).picPortionResize({
												staticSide: 'width',
												setting: {
													staticVal: 180 / 0.3 * $( "#photo-size-set" ).slider('value') / 100,
													anotherMax: 0
												},
												keepSmaller: false	
											});
											
											//$('#photo-container').append(a);
											a.appendTo('#photo-container');
											$(this).fadeIn();
											waterFall($('#photo-container'));	
											a.data(
												'picId', v.id
											).attr({
												'data-rel': 'popover',
												'data-content': 
													'原始文件大小: ' + v.size / 1000 + 'Kb<br />' + 
													'保存质量: ' + v.quality + '<br />' + 
													'当前显示: 缩略图<br />' + 
													'上传类型: ' + v.type
											}).popover();	
										});
										$(newImg).bind('error', function(){
											$(this).attr('src', '<?php echo $img_url; ?>img_error.jpg');
										});
	
										$(newImg).attr('src', <?php echo json_encode($picmaterial_url); ?>+v.thumbnailFileSrc);
									});
									$('#loading-block-photo').fadeOut();
								}
							},
							dataType: 'json'
						});
					}
	            }
	    	},

	    	beforeRemove: function(treeId, treeNode){
				if(confirm("删除此相册，将同时删除此相册下的所有图片，以及子相册，确认删除?")){
					$.ajax({
						type: 'POST',
						url: '<?php echo url('albums/delete'); ?>',
						data: {albumId: treeNode.id},
						success: function(ret) {
							if(ret){
								$.fn.zTree.getZTreeObj(treeId).selectNode(treeNode.getParentNode());
								$('#zTreeCurrId').val(0);
								$('#currAlbumTxt').text('');
							}
						}
					});
					return true;
				}else{
					return false;
				}
	    	},

	    	onRename: function(event, treeId, treeNode) {
	    		$.ajax({
					type: 'POST',
					url: '<?php echo url('albums/editname'); ?>',
					data: {
						albumId: treeNode.id,
						newName: treeNode.name
					},
					success: function(ret) {
						if(ret){
							if($('#zTreeCurrId').val() == treeNode.id){
								$('#currAlbumTxt').text(treeNode.name);
							}
						}
					}
				});
		    }
    	}
    };  

    $.fn.zTree.init($("#tree"), setting, <?php echo json_encode($albumAllSimple); ?>);

	$('#addNewAlbumBtn').click(function(){
		$('#albumForm').find('input, textarea').val('');
		$('#albumForm').find('#edit_foldername').removeAttr('readonly');
		$('#albumForm').find('#parentId').val($('#zTreeCurrId').val());
		$('#albumForm').modal('show');
	});

	$('#editCurrAlbumBtn').click(function(){
		var currNode = $.fn.zTree.getZTreeObj('tree').getNodeByParam("id", $('#zTreeCurrId').val(), null);
		if(currNode){
			$('#albumForm').find('input, textarea').val('');
			var parentId = currNode.parent_id? currNode.parent_id : 0;
			$('#albumForm').find('#parentId').val(parentId);
			$('#albumForm').find('#albumId').val(currNode.id);
			$('#albumForm').find('#edit_name').val(currNode.name);
			$('#albumForm').find('#edit_name_en').val(currNode.name_en);
			$('#albumForm').find('#edit_foldername').val(currNode.foldername).attr('readonly', true);
			$('#albumForm').find('#edit_sketch').val(currNode.sketch);
			$('#albumForm').modal('show');
		}else{
			noty({
				'text': '请选择相册',
				'layout': 'topRight',
				'type': 'error'
			});		
		}

	});	

	$('#albumForm .save').click(function(){
		if($('#albumForm').find('#albumId').val() != ''){
			$.ajax({
		    	type: 'POST',
				url: '<?php echo url('albums/edit'); ?>',
				data: $('#albumForm').serialize(),
				success: function(data){
					if(data.result){
						var currNode = $.fn.zTree.getZTreeObj('tree').getNodeByParam("id", $('#zTreeCurrId').val(), null);
						currNode.name = data.editItem.name;
						currNode.name_en = data.editItem.name_en;
						currNode.sketch = data.editItem.sketch;
						currNode.foldername = data.editItem.foldername;
						$.fn.zTree.getZTreeObj("tree").updateNode(currNode);

						$('#albumForm').modal('hide');
					}else{					
						$.each(data.errorinfo, function(item, errors){
							$.each(errors, function(k, error){
								noty({
									'text': item + ': ' + error,
									'layout': 'topRight',
									'type': 'error'
								});
							});
						});
					}
				},
				dataType: 'json'
			});	
		}else{
		    $.ajax({
		    	type: 'POST',
				url: '<?php echo url('albums/add'); ?>',
				data: $('#albumForm').serialize(),
				success: function(data){
					if(data.result){
						if($('#zTreeCurrId').val() == 0){
							$.fn.zTree.getZTreeObj("tree").addNodes(null, [data.addItem]);
						}else{
							currNode = $.fn.zTree.getZTreeObj("tree").getNodeByParam("id", $('#zTreeCurrId').val(), null);
							$.fn.zTree.getZTreeObj("tree").addNodes(currNode, [data.addItem]);
						}
						
						$('#albumForm').modal('hide');
					}else{					
						$.each(data.errorinfo, function(item, errors){
							$.each(errors, function(k, error){
								noty({
									'text': item + ': ' + error,
									'layout': 'topRight',
									'type': 'error'
								});
							});
						});
					}
				},
				dataType: 'json'
			});		
		}
	});


});
</script>